/* eslint-disable no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable no-shadow */
import React, { FC, useState, useEffect } from 'react';
import { Button, Table, Dropdown, Menu } from 'choerodon-ui';
import { Form, TextField, Pagination } from 'choerodon-ui/pro';
import { connect } from 'dva';
import { DropDownProps } from 'choerodon-ui/lib/dropdown';
import { LabelLayoutType } from 'choerodon-ui/pro/lib/form/Form';
import { SizeChangerPosition } from 'choerodon-ui/pro/lib/pagination/enum';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { StateType } from './typing';
// import PageHeaderWrapper from 'hzero-front/lib/components/Page/PageHeaderWrapper';
// const { Content, Header } = Layout;
import styles from './style.less';

interface OrderManageProps {
  dispatch: any;
  orderManage: StateType;
  loading: boolean;
}

const OrderManage: FC<OrderManageProps> = props => {
  const { dispatch, orderManage } = props;
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const { list } = orderManage;

  useEffect(() => {
    dispatch({
      type: 'orderManage/fetchTable',
      payload: {
        page: page - 1,
        pageSize,
      },
    });
  }, []);

  function changePagination(page: number, pageSize: number) {
    dispatch({
      type: 'orderManage/fetchTable',
      payload: {
        page: page - 1,
        pageSize,
      },
    });
    setPage(page);
    setPageSize(pageSize);
  }

  // function sizeChangerRenderer({ text }: any) {
  //   return `${text} 条/页`;
  // }

  // function pagerRenderer(page: any, type: any) {
  //   switch (type) {
  //     case 'first':
  //       return <Icon type="fast_rewind" style={{ color: '#666' }} />;
  //     case 'last':
  //       return <Icon type="fast_forward" style={{ color: '#666' }} />;
  //     case 'prev':
  //       return <Icon type="navigate_before" style={{ color: '#666' }} />;
  //     case 'next':
  //       return <Icon type="navigate_next" style={{ color: '#666' }} />;
  //     case 'jump-prev':
  //     case 'jump-next':
  //       return '•••';
  //     default:
  //       return page;
  //   }
  // }

  const menu = (
    <Menu className={styles.menu}>
      <Menu.Item key="0">
        <Button icon="mode_edit">编辑</Button>
      </Menu.Item>
      <Menu.Item key="1">
        <Button icon="publish2">发布</Button>
      </Menu.Item>
      <Menu.Item key="3">
        <Button icon="delete">删除</Button>
      </Menu.Item>
    </Menu>
  );

  const columns = [
    {
      title: '销售订单',
      dataIndex: 'saleOrder',
      key: 'saleOrder1',
    },
    {
      title: '订单类型',
      dataIndex: 'orderType',
      key: 'orderType1',
    },
    {
      title: '客户',
      dataIndex: 'customName',
      key: 'customName1',
    },
    {
      title: '制单人',
      dataIndex: 'maker',
      key: 'maker1',
    },
    {
      title: '公告状态',
      dataIndex: 'status',
      key: 'status1',
      render: (_: any, record: any) => {
        if (record.status === 'notGenerate') {
          return <span style={{ color: '#4F7DE7' }}>未生成</span>;
        } else if (record.status === 'allGenerate') {
          return <span style={{ color: '#39C878' }}>全部生成</span>;
        } else if (record.status === 'canceled') {
          return <span style={{ color: '#5A667' }}>已取消</span>;
        }
      },
    },
    {
      title: '制单时间',
      dataIndex: 'datetime',
      key: 'datetime1',
    },
    {
      title: '',
      key: 'action1',
      render: (_: any, _record: any) => (
        <Dropdown overlay={menu} trigger={('click' as unknown) as DropDownProps['trigger']}>
          <Button className={styles.editBtn} icon="more_vert" />
        </Dropdown>
      ),
    },
  ];

  return (
    <PageHeaderWrapper
      header={
        <Button
          style={{
            marginRight: 10,
          }}
          funcType="raised"
          type="primary"
          icon="add"
        >
          新建
        </Button>
      }
      title="订单管理列表"
      headerProps={{
        backPath: '/',
      }}
    >
      <div className={styles['order-manage']}>
        <div className={styles.content}>
          <div className={styles['content-detail']}>
            <Form labelLayout={'vertical' as LabelLayoutType} columns={4} style={{ paddingBottom: 16 }}>
              <TextField label="销售订单" />
              <TextField label="工号-箱头-分箱" />
              <TextField label="物料编码" />
              {/* <Col span={4} style={{ textAlign: 'right' }} className={styles.buttons}>
                <Button>
                  更多
                  <Icon type="expand_more" />
                </Button>
                <Button>重置</Button>
                <Button style={{ background: '#4F7DE7', color: 'white' }} type="primary">
                  查询
                </Button>
              </Col> */}
              <div className={styles.buttons}>
                <Button icon="expand_more">更多</Button>
                <Button>重置</Button>
                <Button type="primary">查询</Button>
              </div>
            </Form>

            <Table dataSource={list} pagination={false} filterBar={false} columns={columns} />

            <div className={styles.pagination}>
              <Pagination
                showSizeChangerLabel={false}
                showTotal={false}
                showPager
                sizeChangerPosition={'right' as SizeChangerPosition}
                // sizeChangerOptionRenderer={sizeChangerRenderer}
                // itemRender={pagerRenderer}
                total={500}
                pageSize={pageSize}
                page={page}
                onChange={changePagination}
              />
            </div>
          </div>
        </div>
      </div>
    </PageHeaderWrapper>
  );
};

export default connect(
  ({
    orderManage,
    loading,
  }: {
    orderManage: StateType;
    loading: {
      models: { [key: string]: boolean };
    };
  }) =>
    ({
      orderManage,
      loading: loading.models.orderManage,
    } as any)
)(OrderManage);
